
import React, { memo, useEffect, useRef, useState, useMemo } from 'react';

import sty from './sty.module.css';
import { message, Input } from 'antd'
import { SearchOutlined } from '@ant-design/icons';
import { getSongDetail } from '@/pages/player/store/actionCreator'
import { getSearchSuggest } from '@/api/search';
import { useDispatch } from 'react-redux';

import SearchList from '../searchList'
import { useHistory } from 'react-router';


let timerId = null;

const SearchBox = () => {
  const dispatch = useDispatch();


  const history = useHistory()

  const inputRef = useRef(null);
  const [songs, setSongs] = useState([]);
  const [inputVal, setInputVal] = useState('');
  const [playlists, setPlaylists] = useState([]);
  const [artists, setArtists] = useState([]);
  const [albums, setAlbums] = useState([]);
  const [focusStatus, setFocusStatus] = useState(false)

  useEffect(() => {
    return () => {
      timerId = null
    }
  }, [])


  const changeCurSong = async (v) => {
    setInputVal(v.name);
    await dispatch(getSongDetail(v.id));
    document.getElementById('audio').autoplay = true;
  }

  const handleEnter = () => {
    history.push(`/search/single?type=1&song=${inputVal}`)
  }
  const inputChange = () => {
    if (inputVal.length) {
      timerId && clearTimeout(timerId);
      timerId = setTimeout(() => {
        getSearchSuggest(inputVal).then(res => {

          if (res.code === 200) {
            const { albums = [], songs = [], playlists = [], artists = [] } = res.result;
            setSongs(songs);
            setAlbums(albums);
            setPlaylists(playlists);
            setArtists(artists);

          }
        }).catch(() => {
          message.error('网络异常请重试')
        })
      }, 400)
    }
  }
  const handleBlur = () => {
    setTimeout(() => {
      setFocusStatus(false)
    }, 400);
  }

  const songsList = useMemo(() => songs, [songs])
  const playlistsList = useMemo(() => playlists, [playlists])
  const albumsList = useMemo(() => albums, [albums])
  const artistsList = useMemo(() => artists, [artists])


  return <div className={sty.searchWrap}>
    <Input
      value={inputVal}
      ref={inputRef}
      onInput={e => setInputVal(e.target.value.trim())}
      onChange={inputChange}
      onFocus={() => setFocusStatus(true)}
      onBlur={handleBlur}
      onPressEnter={handleEnter}
      prefix={<SearchOutlined />}
      size='large'
      placeholder='歌曲/歌手'
      className={sty.search}

    />
    <div className={sty.downSlider}

      style={{
        display: focusStatus ? "block" : 'none'
      }}>
      <div className={sty.searchHeader}>
        搜‘歌曲’相关用户
      </div>
      <SearchList title='歌曲' list={songsList} handleClick={changeCurSong} />
      <SearchList title='歌曲' list={playlistsList} handleClick={changeCurSong} />
      <SearchList title='歌曲' list={artistsList} handleClick={changeCurSong} />
      <SearchList title='歌曲' list={albumsList} handleClick={changeCurSong} />
    </div>
  </div>
}
export default memo(SearchBox)